﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../css/element.css" rel="stylesheet" />
    <script src="../js/vue.min.js"></script>
    <script src="../js/element.js"></script>
    <style>
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-aside width="280px" style="height:600px;overflow-y:scroll;">
                <el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick"></el-tree>
            </el-aside>
            <el-main>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="站点名称">
                        <el-input v-model="form.Name"></el-input>
                    </el-form-item>
                    <el-form-item label="站点地址">
                        <el-input v-model="form.Url">
                            <template slot="append">
                                <el-button @click="openExplorer">打开浏览器</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="物理路径">
                        <el-input v-model="form.PhysicalPath"></el-input>
                    </el-form-item>
                    <el-form-item v-if="isLocalhost">
                        <el-col span="14">&nbsp;</el-col>
                        <el-col span="5" style="text-align:right;"><el-button @click="openVs">打开VS</el-button></el-col>
                        <el-col span="5" style="text-align:right;"><el-button @click="openDirectory">打开文件夹</el-button></el-col>
                    </el-form-item>
                    <el-form-item label="数据库">
                        <el-row>
                            <el-col span="3">
                                地址：
                            </el-col>
                            <el-col span="9">
                                <el-input v-model="form.DbAddress"></el-input>
                            </el-col>
                            <el-col span="3">
                                名称：
                            </el-col>
                            <el-col span="9">
                                <el-input v-model="form.DbName"></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:10px;">
                            <el-col span="3">
                                账号：
                            </el-col>
                            <el-col span="9">
                                <el-input v-model="form.User"></el-input>
                            </el-col>
                            <el-col span="3">
                                密码：
                            </el-col>
                            <el-col span="9">
                                <el-input v-model="form.Pwd"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <el-col span="19">&nbsp;</el-col>
                        <el-col span="5" style="text-align:right;"><el-button @click="openSsms">打开数据库</el-button></el-col>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
        </div>
        <script type="text/javascript">
         var vm = new Vue({
                el: '#app',
                data: {
                    props: {
                        label: 'Name',
                        children: 'zones',
                        isLeaf: 'leaf',
                    },
                    isLocalhost:false,
                    form: {}
                },
                methods: {
                    handleNodeClick(siteinfo,node) {
                        console.log(siteinfo);
                        console.log(node.level);
                        if (node.level == 2) {
                            this.isLocalhost = siteinfo.ip == "localhost";
                            this.form = siteinfo;
                            var res = JSON.parse(my.getDetail(siteinfo.ip + ":" + node.parent.data.port, siteinfo.PhysicalPath));
                            console.log(res);
                            this.form.DbAddress = res.Address;
                            this.form.DbName = res.Name;
                            this.form.User = res.User;
                            this.form.Pwd = res.Pwd;
                        }
                    },
                    loadNode(node, resolve) {
                        console.log(node);
                        if (node.level === 0) {
                            //return resolve([{ Name: "localhost", ip: "localhost", port: 50051 }, { Name: '201测试', ip: "192.168.0.201", port: 50051 }, { Name: '206测试', ip: "192.168.0.201", port: 50051  }]);
                            var res = JSON.parse(my.getServers());
                            var listServer = res.map(v => { return { Name: v.Name, ip: v.Host, port: v.Port } });
                            return resolve(listServer);
                        }
                        if (node.level > 1) return resolve([]);

                        setTimeout(() => {
                            var res = JSON.parse(my.getListSite(node.data.ip + ":" + node.data.port));
                            for (var i = 0; i < res.length; i++) {
                                res[i].leaf = true;
                                res[i].Url = "http://" + node.data.ip + ":" + res[i].Port;
                                res[i].ip = node.data.ip;
                            }
                            resolve(res);
                        }, 100);
                    },
                    openDirectory() {
                        if (this.form.PhysicalPath) {
                            my.openPath("directory", this.form.PhysicalPath);
                        }
                    },
                    openExplorer() {
                        my.openPath("http", this.form.Url);
                    },
                    openVs() {
                        my.openPath("vs", this.form.PhysicalPath);
                    },
                    openSsms() {
                        if (this.form.DbAddress && this.form.DbName) {
                            my.openPath("ssms", `-S ${this.form.DbAddress} -d ${this.form.DbName} -U ${this.form.User} -P ${this.form.Pwd}`);
                        }
                    },
                }
            })
        </script>
</body>
</html>